<template>
	<view class="bikeDetail">
		<!-- 支付宝自定义导航栏 -->
		<CustomBar />
		<u-toast ref="uToast"></u-toast>
		<view class="container">
			<view class="img">
				<swiper class="bikeImg-swiper" circular indicator-dots autoplay :interval="3000" v-if="bikeDetail.img">
					<swiper-item v-for="img in bikeDetail.img.split(',')" :key="img">
						<image :src="imgUrl + img"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="bikeName">
				<text class="bold">{{bikeDetail.brandName}}{{bikeDetail.name}}</text>
			</view>
			<view class="flex baseInfo">
				<view class="bikePrice">
					价格: <text class="bold">{{bikeDetail.price}}</text>
				</view>
				<view class="marketTime">
					上市时间: <text class="bold">{{bikeDetail.marketTime}}</text>
				</view>
			</view>
			<view class="content">
				<view class="detail-params card">
					<view class="top">
						<view class="title">详细参数</view>
					</view>
					<view class="tabList">
						<view :class="['tab',{'activeBar': activeBar === index}]" v-for="(item,index) in tabList"
							:key="index" @click="tabClick(item,index)">
							<text>{{item.name}}</text>
						</view>
					</view>
					<view class="flex" v-for="(item,index) in currentDetailParams" :key="index">
						<view class="params">
							{{item.name}}: <text class="bold"> {{item.content}}</text>
						</view>
					</view>
				</view>
				<view class="score card">
					<view class="top">
						<view class="left">
							<view class="scoreTitle" v-if="bikeDetail.scoreLevel && bikeDetail.scoreLevel.length > 0">
								单车评分</view>
							<view class="scoreNum" v-if="bikeDetail.scoreLevel && bikeDetail.scoreLevel.length > 0">
								{{bikeDetail.scoreNum}}
							</view>
							<view class="scoreNum" v-else>暂无评分</view>
						</view>
						<view class="right" v-if="bikeDetail.scoreLevel && bikeDetail.scoreLevel.length>0">
							<template v-if="bikeDetail.scoreLevel">
								<view class="lineScore" v-for="(item,index) in bikeDetail.scoreLevel" :key="index">
									<text class="star">{{index + 1}}星</text>
									<u-line-progress activeColor="#FA3534" :percentage="item.scorePercentage"
										:showText="false">
									</u-line-progress>
									<view class="scorePercentage">{{item.scorePercentage}}%</view>
								</view>
							</template>
						</view>
					</view>
					<view class="bottom">
						<view v-if="bikeDetail.isScore">已评分 </view>
						<view v-else>立即评分</view>
						<u-rate :size="60" :count="5" v-model="scoreNum" :touchable="false">
						</u-rate>
					</view>

				</view>
				<view class="comment card">
					<view class="top">
						<view class="title">车友评论</view>
						<view class="commentNum" v-if="bikeCommentTotal > 0">
							{{bikeCommentTotal}}条
						</view>
					</view>
					<view class="comment-content" v-if="bikeCommentList.length > 0">
						<view class="comment-detail" v-for="item in bikeCommentList" :key="item.id">
							<view class="left">
								<view class="avatar">
									<u-avatar :src="item.avatar" shape="circle" :size="100"></u-avatar>
								</view>
								<view class="text">
									<view class="commentUser">
										{{item.createdUserName}}
									</view>
									<view class="commentContent">
										{{item.content}}
									</view>
									<view class="commentTime">
										{{item.createdTime}}
									</view>
								</view>
							</view>
							<view class="right">
								<text v-if="currentUserId == item.createdUserId" class="delete"
									@click="deleteComment(item.id)">删除</text>
							</view>
						</view>
						<view class="seeMore" v-if="bikeCommentTotal > bikeCommentList.length" @click="seeMore">
							查看更多
						</view>
					</view>
					<view class="noData" v-else>
						暂无评论
					</view>
				</view>
			</view>
			<view class="feature">
				<div class="collect icon" @click="collectBike">
					<u-icon :name="!bikeDetail.isCollect ? 'star': 'star-fill'" :size="50"></u-icon>
					<view class="collectText" @click="collectBike">{{!bikeDetail.isCollect ? '收藏': '已收藏'}}</view>
				</div>
				<u-button type="primary" @click="commentPopUpVisible=true">评论
				</u-button>
				<u-button @click="contrast">对比</u-button>
			</view>

			<u-popup :show="commentPopUpVisible" position="bottom" animation @close="handlePopupClose"
				:custom-style="{ bottom: keyboardHeight + 'px' }">
				<view class="popup-comment">
					<u-textarea class="textarea" v-model="textareaValue" placeholder="请写出对这辆车的评价"
						:custom-style="{height: '250rpx'}" :maxlength="100">
					</u-textarea>
				</view>
				<u-button type="primary" @click="submitComment" :disabled="!textareaValue.length">
					提交
				</u-button>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import request from '../../api/index.js'
	import {
		imgUrl
	} from '../../util/index.js'
	export default {
		data() {
			return {
				activeBar: 0,
				bikeDetail: {},
				detailParams: [],
				currentDetailParams: [],
				imgUrl,
				navigationBarTitle: '',
				bikeCommentList: [],
				bikeCommentTotal: 0,
				bikeId: '',
				commentPopUpVisible: false,
				isReadonly: false,
				textareaValue: '',
				scoreNum: 0,
				scoreNum2: 0,
				isRateDisabled: true,
				tabList: [{
					name: '车体部分',
					paramsType: 'bikeBody'
				}, {
					name: '轮组系统',
					paramsType: 'wheelGroup'
				}, {
					name: '变速传动系统',
					paramsType: 'variableSpeedTransmission'
				}, {
					name: '组件',
					paramsType: 'assembly'
				}],
				keyboardHeight: 0,
				isInitialized: false //标志位，用于跳过初始赋值
				// safeAreaBottom: uni.getStorageInfoSync('systemInfo').safeAreaInsets.bottom
			}
		},
		methods: {
			getBikeDetail() {
				request(`/bike/${this.platform === 'mp-weixin'? 'wxDetail': 'detail'}`, {
					bikeId: this.bikeId
				}, 'GET').then(res => {
					if (res.status === 0) {
						this.bikeDetail = res.data
						this.detailParams = JSON.parse(res.data.detailParams)
						this.currentDetailParams = JSON.parse(res.data.detailParams).bikeBody
						if (res.data.isScore) {
							this.scoreNum = res.data.score
						}
						this.bikeCommentList = res.data.commentList.data
						this.bikeCommentTotal = res.data.commentList.total
						this.isInitialized = true
						// this.isReadonly = false
					}
				})
			},
			tabClick(item, index) {
				this.activeBar = index;
				this.currentDetailParams = this.detailParams[item.paramsType]
			},
			deleteComment(id) {
				request(`/comment/delete/${id}`).then(res => {
					if (res.status === 0) {
						this.$refs.uToast.show({
							type: 'default',
							message: res.msg,
						})
						this.getBikeDetail()
					}
				})
			},
			seeMore() {
				uni.navigateTo({
					url: `/pages/commentList/commentList?bikeId=${this.bikeId}`
				})
			},
			handlePopupClose() {
				this.commentPopUpVisible = false
			},
			submitComment(e) {
				request(`/comment/${this.platform === 'mp-weixin'? 'wxAdd': 'add'}`, {
					content: this.textareaValue,
					bikeId: this.bikeId
				}).then(res => {
					if (res.status === 0) {
						this.$refs.uToast.show({
							type: 'default',
							message: "评论成功",
						})
						this.getBikeDetail()
						this.textareaValue = ''
						this.commentPopUpVisible = false
					}
				})
			},
			collectBike() {
				request(`/bikeCollect/${this.platform === 'mp-weixin'? 'wxCollect': 'collect'}/${this.bikeId}`).then(
					res => {
						if (res.status === 0) {
							this.$refs.uToast.show({
								type: 'default',
								message: res.msg
							})
							this.getBikeDetail()
						}
					})
			},
			contrast() {
				this.$refs.uToast.show({
					type: 'default',
					message: "此功能暂未开放",
				})
			},
			rateChange() {
				console.log('执行了吗。打分')
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getBikeDetail()
			})
		},
		onLoad(option) {
			this.bikeId = option.bikeId
			this.navigationBarTitle = option.bikeType

			uni.onKeyboardHeightChange((res) => {
				this.keyboardHeight = res.height
			});
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.navigationBarTitle
			})
			// #ifdef MP-ALIPAY
			uni.setNavigationBarColor({
				// frontColor: '#0000',
				backgroundColor: '#ffffff',
			})
			// #endif 
		},
		computed: {
			currentUserId: function() {
				return this.$store.state.userInfo.userId
			},
			platform() {
				return this.$store.state.platform
			}
		},
		watch: {
			scoreNum: {
				handler(newVal, oldVal) {
					console.log(oldVal)
					if (oldVal === 0) return;
					request(`/bikeScore/${this.platform === 'mp-weixin'? 'wxScore': 'score'}`, {
						bikeId: this.bikeId,
						score: this.scoreNum
					}).then(res => {
						if (res.status === 0) {
							this.$refs.uToast.show({
								type: 'default',
								message: "评分成功",
							})
						}
					})
				},
				immediate: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bikeDetail {
		width: 100%;
		height: 100vh;
		background: linear-gradient(#CFEAFF, #F6F6F6);

		.container {
			.img {
				.bikeImg-swiper {
					height: 480rpx;
					swiper-item {
						image {
							width: 100%;
						}
					}
				}
			}

			.bikeName {
				text-align: center;
				margin-bottom: 40rpx;
				margin-top: 20rpx;
				font-size: 36rpx;
			}

			.baseInfo {
				padding: 0 40rpx;
			}

			.content {
				padding: 0 40rpx 120rpx;

				.detail-params {

					.bikeName {
						font-size: 35rpx;
					}

					.tabList {
						display: flex;
						justify-content: space-between;
						margin: 30rpx 0 20rpx;

						.tab {
							font-size: 35rpx;
							padding-bottom: 10rpx;

						}

						.activeBar {
							border-bottom: 6rpx solid #3c9cff;
						}

					}
				}

				.comment {
					.comment-content {
						.comment-detail {
							display: flex;
							align-items: flex-start;
							justify-content: space-between;
							margin-bottom: 10px;
							padding-bottom: 10px;
							border-bottom: 1px solid #F6F6F6;

							.left {
								display: flex;
								align-items: flex-start;
								flex: 1;

								.text {
									margin-left: 10px;

									.commentUser {
										font-size: 30rpxpx;
										// color: #F6F6F6
									}

									.commentContent {
										font-size: 27rpx;
										margin: 5px 0;
										width: 90%;
										word-break: break-all;
									}

									.commentTime {
										font-size: 26rpx;
									}
								}
							}

							.right {
								width: 60rpx;

								.delete {
									color: orangered;
									font-size: 28rpx;
								}
							}
						}
					}

					.seeMore {
						text-align: center;
						font-size: 30rpx;
						line-height: 1.5;
					}
				}

				.top {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-bottom: 30rpx;

					.left {
						.scoreTitle {
							font-size: 40rpx;
							margin-bottom: 10rpx;
						}

						.scoreNum {
							font-size: 50rpx;
							color: #FA3534;
						}
					}

					.right {
						.lineScore {
							display: flex;
							align-items: center;
							font-size: 20rpx;
							margin-bottom: 10rpx;

							.star {
								width: 38rpx;
							}

							::v-deep .u-line-progress {
								width: 300rpx;
								margin: 0 10rpx;
							}

							.scorePercentage {
								width: 45rpx;
								text-align: right;
							}
						}
					}

					.title {
						font-size: 35rpx;
						line-height: 1.5;
						font-weight: 600;
					}

					.commentNum {
						font-size: 32rpx;
						line-height: 1.5;
						font-weight: 400;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;

					.myrate {
						.rate {
							position: absolute;
						}
					}

					::v-deep.rate {
						position: absolute;
					}
				}

				.card {
					background: #fff;
					width: 100%;
					border-radius: 5px;
					margin-bottom: 20px;
					padding: 15px;
					box-sizing: border-box;
				}
			}

			.flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 25rpx;
				font-size: 35rpx;

				.params {
					font-size: 30rpx;
				}
			}


			.bold {
				font-weight: 800;
				margin-left: 12rpx;
			}
		}

		::v-deep.u-popup {
			.popup-comment {
				// padding: 10px;
				height: 400rpx;
				padding: 20rpx 30rpx;

				.u-textarea {
					.u-textarea__field {
						height: 85% !important;
					}
				}
			}

			.u-button {
				position: absolute;
				width: 20%;
				bottom: 10px;
				transform: translateX(-50%);
				left: 50%;
			}

			.uicon-close {
				font-size: 15px !important;
			}
		}

		.feature {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 60px;
			background: #fff;
			box-shadow: 0px 3px 14px 5px rgba(76, 114, 164, 0.33);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;

			&:first-child {
				.ant-button {
					border-radius: 4px 0 0 4px;
				}
			}

			.ant-button {
				flex: 1;
				// border-radius: 0;
			}

			.icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				margin-right: 10rpx;
				width: 30%;

				.collectText {
					font-size: 12px;
				}
			}
		}
	}
</style>
